<template>
  <canvas ref="myCanvas" class="myCanvas"></canvas>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const myCanvas = ref(null);
let animationId: number | null = null;
let animationTime = 0;

// 存储所有需要动画的元素
const animatedElements: any[] = [];

function getBiLi(num: number) {
  return myCanvas.value.clientWidth / 1107 * num;
}

onMounted(() => {
  const canvas = myCanvas.value;
  const ctx = canvas.getContext("2d");
  // 获取设备像素比
  const dpr = 1; // window.devicePixelRatio || 1;
  console.log(dpr, 16);
  // 设定canvas的实际像素尺寸
  //   1107* 581
  const cssWidth = canvas.clientWidth;
  const cssHeight = getBiLi(581);
  canvas.width = cssWidth * dpr;
  canvas.height = cssHeight * dpr;
  console.log(canvas.clientWidth, canvas.height, 22);
  // 保持页面显示尺寸不变
  canvas.style.width = cssWidth + "px";
  canvas.style.height = cssHeight + "px";
  // 缩放绘图环境
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

  const bgImg = new Image();
  bgImg.src = "/centerBak1.png";

  bgImg.onload = function () {
    // 创建图案
    const pattern = ctx.createPattern(bgImg, "no-repeat");
    // 设置填充样式为图案
    ctx.fillStyle = pattern;

    // 绘制背景
    ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
    
    // 初始化所有元素
    initElements();
    
    // 开始动画循环
    startAnimation();
  };
});

// 初始化所有需要动画的元素
function initElements() {
  // 清空数组
  animatedElements.length = 0;
  
  // 添加所有元素到动画数组
  // 右侧元素
  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 930, y: 20, w: 240, h: 70,
    flip: true,
    children: [
      { type: 'text', text: "所有者权益", x: 575, y: 75, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 655, y: 75, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-5.png", x: 870, y: 35, w: 30, h: 30 }
    ],
    amplitude: 3, // 晃动幅度
    speed: 0.02, // 晃动速度
    phase: 0 // 初始相位
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 980, y: 120, w: 240, h: 70,
    flip: true,
    children: [
      { type: 'text', text: "负债总额", x: 625, y: 175, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 690, y: 175, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-6.png", x: 920, y: 135, w: 30, h: 30 }
    ],
    amplitude: 2.5,
    speed: 0.025,
    phase: Math.PI / 4
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 980, y: 220, w: 240, h: 70,
    flip: true,
    children: [
      { type: 'text', text: "研发经费", x: 625, y: 275, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 690, y: 275, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-7.png", x: 920, y: 235, w: 30, h: 30 }
    ],
    amplitude: 3.5,
    speed: 0.03,
    phase: Math.PI / 2
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 930, y: 320, w: 240, h: 70,
    flip: true,
    children: [
      { type: 'text', text: "已交税费", x: 575, y: 375, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 640, y: 375, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-8.png", x: 870, y: 335, w: 30, h: 30 }
    ],
    amplitude: 2,
    speed: 0.022,
    phase: Math.PI * 3 / 4
  });

  // 左侧元素
  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 160, y: 20, w: 240, h: 70,
    flip: false,
    children: [
      { type: 'text', text: "资产总额", x: 100, y: 75, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 160, y: 75, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-1.png", x: 190, y: 35, w: 30, h: 30 }
    ],
    amplitude: 3.2,
    speed: 0.018,
    phase: Math.PI / 6
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 110, y: 120, w: 240, h: 70,
    flip: false,
    children: [
      { type: 'text', text: "利润总额", x: 60, y: 175, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 120, y: 175, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-2.png", x: 140, y: 135, w: 30, h: 30 }
    ],
    amplitude: 2.8,
    speed: 0.024,
    phase: Math.PI / 3
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 110, y: 220, w: 240, h: 70,
    flip: false,
    children: [
      { type: 'text', text: "营业收入", x: 60, y: 275, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 120, y: 275, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-3.png", x: 135, y: 235, w: 30, h: 30 }
    ],
    amplitude: 3.8,
    speed: 0.028,
    phase: Math.PI * 2 / 3
  });

  addAnimatedElement({
    type: 'image',
    src: "/d1.png",
    x: 160, y: 320, w: 240, h: 70,
    flip: false,
    children: [
      { type: 'text', text: "职工人数", x: 110, y: 375, fontSize: 12, color: "#fff" },
      { type: 'text', text: "2078", x: 170, y: 375, fontSize: 20, color: "#fff" },
      { type: 'image', src: "/d1-4.png", x: 185, y: 335, w: 30, h: 30 }
    ],
    amplitude: 2.2,
    speed: 0.02,
    phase: Math.PI * 5 / 6
  });
}

// 添加动画元素
function addAnimatedElement(element: any) {
  animatedElements.push(element);
}

// 开始动画循环
function startAnimation() {
  function animate() {
    animationTime += 0.016; // 约60fps
    
    const canvas = myCanvas.value;
    const ctx = canvas.getContext("2d");
    
    // 重新绘制背景
    const bgImg = new Image();
    bgImg.src = "/centerBak1.png";
    bgImg.onload = function() {
      ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
      
      // 绘制所有动画元素
      animatedElements.forEach(element => {
        drawAnimatedElement(ctx, element, animationTime);
      });
    };
    
    animationId = requestAnimationFrame(animate);
  }
  
  animate();
}

// 绘制动画元素
function drawAnimatedElement(ctx: CanvasRenderingContext2D, element: any, time: number) {
  // 计算当前Y偏移
  const yOffset = Math.sin(time * element.speed + element.phase) * element.amplitude;
  
  // 绘制主图片
  const img = new Image();
  img.src = element.src;
  img.onload = function() {
    ctx.save();
    
    if (element.flip) {
      // 右侧翻转的图片
      ctx.translate(getBiLi(element.x), getBiLi(element.y) + yOffset);
      ctx.scale(-1, 1);
      ctx.drawImage(img, 0, 0, getBiLi(element.w), getBiLi(element.h));
    } else {
      // 左侧正常图片
      ctx.drawImage(img, getBiLi(element.x), getBiLi(element.y) + yOffset, getBiLi(element.w), getBiLi(element.h));
    }
    
    ctx.restore();
    
    // 绘制子元素（文字和小图标）
    element.children.forEach((child: any) => {
      if (child.type === 'text') {
        drawAnimatedText(ctx, child, yOffset);
      } else if (child.type === 'image') {
        drawAnimatedChildImage(ctx, child, yOffset);
      }
    });
  };
}

// 绘制动画文字
function drawAnimatedText(ctx: CanvasRenderingContext2D, textElement: any, yOffset: number) {
  ctx.save();
  ctx.font = `italic small-caps bold ${textElement.fontSize}px arial`;
  ctx.fillStyle = textElement.color;
  ctx.fillText(
    textElement.text, 
    getBiLi(textElement.x) + 120, 
    getBiLi(textElement.y) - 13 + yOffset
  );
  ctx.restore();
}

// 绘制动画子图片
function drawAnimatedChildImage(ctx: CanvasRenderingContext2D, imageElement: any, yOffset: number) {
  const img = new Image();
  img.src = imageElement.src;
  img.onload = function() {
    ctx.save();
    ctx.drawImage(
      img, 
      getBiLi(imageElement.x), 
      getBiLi(imageElement.y) + yOffset, 
      getBiLi(imageElement.w), 
      getBiLi(imageElement.h)
    );
    ctx.restore();
  };
}

// 组件卸载时清理动画
onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
});
</script>
<style scoped>
.myCanvas {
  width: 100%;
  height: 100%;
}
</style>
